<script type="text/javascript" src="resources/js/psycho.js"></script>
<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="resources/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="resources/buttons/js/buttons.js"></script>
<script type="text/javascript" src="resources/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="resources/js/validation.js"></script>


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet" type="text/css" href="resources/effects/animations.css">
<link rel="stylesheet" type="text/css"
	href="resources/buttons/css/buttons.css" />
<script type="text/javascript" src="resources/effects/fadeIn.js"></script>
<div class="navigation fadeIn">

<script type="text/javascript" charset="utf-8">
			var scrollSpeed = 60; 		// Speed in milliseconds
			var step = 1; 				// How many pixels to move per step
			var current = 0;			// The current pixel row
			var imageWidth = 1024;		// Background image width
			var headerWidth = 280;		// How wide the header is.
			
			//The pixel row where to start a new loop
			var restartPosition = -(imageWidth - headerWidth);
			
			function scrollBg(){
				//Go to next pixel row.
				current -= step;
				
				//If at the end of the image, then go to the top.
				if (current == restartPosition){
					current = 0;
				}
				
				//Set the CSS of the header.
				$('body').css("background-position",current+"px 0");
			}
			
			//Calls the scrolling function repeatedly
			var init = setInterval("scrollBg()", scrollSpeed);
	</script>





	<div class="row">
		<div class="col-xs-7 text-right">
			<a href="home">
				<button type="submit"
					class="button button-border-primary button-pill">Home</button>
			</a>
			<a href="testsPage">
				<button type="submit"
					class="button button-border-action button-pill">Tests</button>
			</a>
			<a href="about">
				<button type="submit"
					class="button button-border-primary button-pill">About</button>
			</a>

		</div>
		<div class="col-xs-2 text-right"></div>
		<div class="col-xs-3 text-right">

			<c:choose>
				<c:when test="${not empty user && user.roleId==1}">
					<div class="btn-group">
						<button type="button"
							class="button button-border-caution button-pill dropdown-toggle"
							data-toggle="dropdown">
							Menu <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="users">Users list</a></li>
							<li><a href="account">Edit account</a></li>
							<li class="divider"></li>
							<li><a href="home">Home</a></li>
						</ul>
					</div>
				</c:when>
				<c:when test="${not empty user && user.roleId==2}">
					<div class="btn-group">
						<button type="button" class="btn btn-success dropdown-toggle"
							data-toggle="dropdown">
							Menu <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="account">Edit account</a></li>
							<li class="divider"></li>
							<li><a href="home">Home</a></li>
						</ul>
					</div>
				</c:when>
				<c:when test="${not empty user && user.roleId==3}">
					<div class="btn-group">
						<button type="button"
							class="button button-border-action button-pill dropdown-toggle"
							data-toggle="dropdown">
							Menu <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="account">Edit account</a></li>
							<li class="divider"></li>
							<li><a href="home">Home</a></li>
						</ul>
					</div>
				</c:when>
				<c:when test="${not empty user && user.roleId==4}">
					<div class="btn-group">
						<button type="button" class="btn btn-warning dropdown-toggle"
							data-toggle="dropdown">
							Menu <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="account">Edit account</a></li>
							<li class="divider"></li>
							<li><a href="home">Home</a></li>
						</ul>
					</div>
				</c:when>

			</c:choose>




			<c:choose>
				<c:when test="${empty user}">
					<button type="button" id="loginButton"
						onclick="$('#loginBox').show();"
						class="button button-border-action button-pill">Sign</button>
					<a href="registrationPage">
						<button type="button" id="regButton"
							class="button button-border-action button-pill">Registration</button>
					</a>

				</c:when>
				<c:otherwise>
					<a href="logout"> <span
						class="button button-border-action button-pill"> logout,
							${user.login} </span></a>
				</c:otherwise>
			</c:choose>

			<div id="loginBox" class="text-left">
				<form id="loginForm" action="login" method="POST">
					<div class="form-group">
						<label for="userLogin"> Login </label> <input type="text"
							class="form-control" id="userLogin" placeholder="login"
							onkeydown="if (event.keyCode == 13) document.getElementById('logButton').click()">
					</div>
					<div class="form-group">
						<label for="userPassword"> Password </label> <input
							type="password" class="form-control" id="userPassword"
							placeholder="password"
							onkeydown="if (event.keyCode == 13) document.getElementById('logButton').click()">
					</div>
					<span class="loginStatus"></span> <input type="button"
						onclick="log()" class="button button-border-primary button-pill" value="enter" id="logButton">
					<a href="forgotPasswordPage">forgot password</a>
				</form>
			</div>







		</div>

	</div>
	
	
	
</div>



